React Bootstrap — Cards Customization

React Bootstrap is one version of Bootstrap made for React.

It’s a set of React components that have Bootstrap styles.

In this article, we’ll look at how to customize React Bootstrap cards.

List Groups

We can add ListGroup s to cards.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import ListGroup from "react-bootstrap/ListGroup";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <ListGroup variant="flush">
          <ListGroup.Item>Praesent ultrices ac</ListGroup.Item>
          <ListGroup.Item>Integer non ante</ListGroup.Item>
          <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
        </ListGroup>
      </Card>
    </>
  );
}

We have a ListGroup in the Card to display it inside the card.

We can also have a header above the list group.

For example, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import ListGroup from "react-bootstrap/ListGroup";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Header>featured</Card.Header>
        <ListGroup variant="flush">
          <ListGroup.Item>Praesent ultrices ac</ListGroup.Item>
          <ListGroup.Item>Integer non ante</ListGroup.Item>
          <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
        </ListGroup>
      </Card>
    </>
  );
}

We just add the Card.Header to display the featured item on top.

Header and Footer

We can add a header with the Card.Header component.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Header>Featured</Card.Header>
        <Card.Body>
          <Card.Title>Special title</Card.Title>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go</Button>
        </Card.Body>
      </Card>
    </>
  );
}

to display the header on top of the card.

It’s gray and it’s above all the content.

The Card.Body is displayed below the header.

Card.Header can be styled with the as prop.

For instance, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Header as="h1">Featured</Card.Header>
        <Card.Body>
          <Card.Title>Special title</Card.Title>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go</Button>
        </Card.Body>
      </Card>
    </>
  );
}

Then the header will be rendered as an h1 element.

Images

We can display images within cards.

To do that, we can write:

import React from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
  return (
    <>
      <Card style={{ width: "20rem" }}>
        <Card.Img variant="top" src="http://placekitten.com/100/100" />
        <Card.Body>
          <Card.Title>Special title</Card.Title>
          <Card.Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            ultrices ac dolor nec vestibulum. Maecenas vulputate diam ut sem
            tempus, id eleifend tortor hendrerit. Sed non orci massa. Aliquam
            eget lectus a ante convallis gravida. Donec fringilla odio ut magna
            gravida aliquam. Cras molestie non ante vel dictum. Cras lacinia
            molestie lacus, in lacinia sapien imperdiet in. Sed eleifend laoreet
            finibus. Integer semper dictum eros nec eleifend. Nunc quam mi,
            finibus lacinia metus vitae, dapibus ultricies diam. Vivamus ante
            nisi, pellentesque at lacus eu, vehicula pretium lorem. Nunc vitae
            ligula laoreet, accumsan diam et, auctor mauris. Fusce vitae posuere
            nibh, vitae eleifend quam. Duis a enim lacus.
          </Card.Text>
          <Button variant="primary">Go</Button>
        </Card.Body>
      </Card>
    </>
  );
}

We have a card with an image on top as indicated by the top prop of Card.Img .

src has the URL of the image.

Conclusion

We can add various things to cards.

They include images and list groups.

List groups in cards and the card itself can have their own header.